import React, { Component } from 'react'
// 导入css文件 => 基于webpack的支持
import "./css/01-index.css";

export default class app extends Component {
    render() {
        let myName = 'Mr.Liu'
        let obj = {
            backgroundColor: 'pink',
            fontSize: '30px'
        }

        return (
            <div>
                {/* 在react中使用{}就可以写逻辑代码了 */}
                {10 + 20}
                <br></br>
                我是{myName}
                <br></br>
                {10 > 20 ? 'aaa' : 'bbb'}

                {/* 第一层括号解析变量 第二层括号表示这是个对象 */}
                <div style={{ background: '#8df' }} >111111</div>
                <div style={obj} >222222</div>

                {/* 写成className是因为react会认为 class 是 es6中的关键字，产生歧义 */}
                <div className='active'>333333</div>
                <div id='myApp'>444444</div>
                {/* react更推荐行内样式，因为 React 觉得每一个组件都认为都是一个独立的整体 */}

                {/* 这里 for 属性也会产生歧义，会被react认为是 for循环关键字所以写成 htmlFor */}
                <label htmlFor="username">用户名：</label>
                <input type='text' id='username' />
            </div >
        )
    }
}
